"use strict";

var App = Backbone.Model.extend( {
  initialize        : function( element ) {
    this.set( {
      id          : element.node.id
    , index       : element.index
    , title       : element.node.title
    , url         : element.node.url
    } );
    
    //this.createFrameElement();
    //this.createButton();
    
    console.log( 'App.initialize', this.get( 'title' ) );
  }
/*
, createFrameElement: function() {
    var that = this;
    this.set( {
      $frame : $( '<iframe/>', {
        src : this.get( 'url' )
      , css : {
          'width' : that.collection.length
        }
      , frameBorder : 0
        } ).load( function( evt ) {
          //if( !that.collection.isActive() ) that.collection.initUI();
          
          
          console.log( that.collection.appList.width(), that.collection.length) 
          
          that.setWidth( that.collection.appList.width() / that.collection.length );
          that.fadeIn( 'slow' );
        } )
    } );
  }
, createButton : function() {
    var that = this;
    this.set( {
      $button : $( '<li/>', { 'class' : 'dot', role : 'button' } )
                .append( $( '<div/>', { 'class' : 'selection-bar' } ) )
                .append( $( '<input/>', { 'class' : 'unselectable', spellcheck : false, disabled : '', value : this.escape( 'title' ) } ) )
                .click( function( evt ) { 
                 
                  console.log( 'click:' + that.get( 'title' ) );
                  
                  that.collection.show( that ); 
                } )
    } );
  }
, activate: function() {
    //if ( !this.get( 'initialized' ) ) this.set( { 'initialized' : true } );
    return this.get( '$frame' );
  }
, show : function() {
    this.button().addClass( 'selected' );
    this.set( { 'active' : true } );
  }
, hide : function() {
    this.button().removeClass( 'selected' );
  }
, isActive: function() {
    return this.get( 'active' )
  }
, fadeIn : function( easing ) {
    this.get( '$frame' ).fadeIn( easing );
  }
, setWidth : function( width ) {
    this.get( '$frame' ).css( {
      'width' : width
    } );
  }
, button : function() {
    return this.get( '$button' );
  }
, frame : function() {
    return this.get( '$frame' );
  }
*/
} );